import React, { Component, useEffect, useState, } from 'react';
import PropTypes from 'prop-types';
import { View, Text,StyleSheet } from 'react-native';
import Container from './Container';
import { Tester, TestSuite, TestCase } from "@rnoh/testerino"
import {  BottomNavigation, Icon } from 'react-native-material-ui';

const BottomNavigationDome = () => {
  const [state, setState] = useState({ active: 'today' });
  return (
    <>
    <Tester>
     <TestSuite name='Bottom navigation'>
      <TestCase itShould='BottomNavigation.ActionProps:key,icon,label,onPress  BottomNavigationProps:active,hidden,style'>
        <View style={styles.rowContainer}>  
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>{state.active}</Text>
          <Icon name={state.active} size={54} />
        </View>
        <BottomNavigation active={state.active} hidden={true} style={{container:{backgroundColor:'#666'}}} >
          <BottomNavigation.Action
            active
            key="today"
            icon="today"
            label="today"
            onPress={() => setState({ active: 'today' })}
          />
          <BottomNavigation.Action
            key="people"
            icon="people"
            label="people"
            onPress={() => setState({ active: 'people' })}
          />
          <BottomNavigation.Action
            key="bookmark-border"
            icon="bookmark-border"
            label="bookmark-border"
            onPress={() => setState({ active: 'bookmark-border' })}
          />
          <BottomNavigation.Action
            key="settings"
            icon="settings"
            label="settings"
            onPress={() => setState({ active: 'settings' })}
          />
        </BottomNavigation>
        </View>
        </TestCase>
        </TestSuite>
        </Tester>
    </>
  )
  
}
const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    marginLeft: 10,

  },
  rowContainer: {
    backgroundColor: '#fff',
    width: '100%',
    height: 500,
    marginTop: 20
  },
  badgeContainer: {
    paddingLeft: 24,
  },
  scrollView: {
    marginBottom: 70
  }
});

export default BottomNavigationDome